<template>
  <div class="musicBox">
    <div class="detailLeft">
      <Catalog ref="catalog" @changeId="changeId" />
    </div>
    <div class="detailRight" v-loading="loading">
      <Introduce :detailObj="RankingObj && RankingObj.playlist" />
      <MusicList
        :playlist="RankingObj && RankingObj.playlist"
        :RankingImgFlag="true"
        :AlbumIsShow="false"
      />
      <Comment
        :resourcesId="
          RankingObj && RankingObj.playlist && RankingObj.playlist.id
        "
        :resourcesType="2"
        ref="comment"
        :commentObj="commentObj"
        @getComment="getComment"
      />
    </div>
  </div>
</template>

<script>
import { songSheetDetail, songSheetComment } from "@/api";
import Introduce from "@/views/RankingList/introduce.vue";
import MusicList from "@/components/musicTable";
import Comment from "@/components/comment";
import Catalog from "@/views/RankingList/catalog.vue";
export default {
  data() {
    return {
      loading: false,
      RankingObj: undefined,
      commentObj: {},
    };
  },
  components: {
    Catalog,
    Introduce,
    Comment,
    MusicList,
  },
  methods: {
    //改变榜单的时候初始化
    changeId() {
      songSheetDetail({ id: this.$route.query.id }).then((res) => {
        this.RankingObj = res;
      });
    },
    getComment(pageNum) {
      this.loading = true;
      songSheetComment({
        id: this.$route.query.id,
        limit: 20,
        offset: ((pageNum || 1) - 1) * 20,
        timestamp: new Date().valueOf(),
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.commentObj = res;
        }
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    if (!to.query.id) {
      next({
        name: "rankinglist",
        query: { id: from.query.id },
      });
    } else {
      next();
    }
    this.$refs.comment.contnetPage = 1;
    this.changeId();
    this.getComment();
  },
};
</script>

<style lang="scss" scoped>
.musicBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .detailLeft {
    flex: 1;
    border-right: 1px solid #d3d3d3;
    box-sizing: content-box;
    overflow: hidden;
  }
  .detailRight {
    width: 740px;
    padding: 0 40px;
    box-sizing: border-box;
  }
}
</style>